<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<body>
    <h1>用户登录</h1>
    <p> 用户名：<input type="text" /> </p>
    <p> 密码：<input type="password" /> </p>
    <p> 验证码： <input type="text" id="userCode"/> 
                <input type="text" readonly id="randCode" 
                onclick="creatRandCode()"/>
    </p>
    <p> <input type="button" value="登录" 
                onclick="checkLogin()" /> </p>

</body>
</html>
<script>
    //定义进行登录校验的方法checkLogin
    function checkLogin()
    {
        /*判断用户输入的验证码和现实的验证码是否一致*/
        var code1=document.getElementById("userCode").value;
        var code2=document.getElementById("randCode").value;
        if(code1 != code2){
            alert("验证码输入错误！");
            creatRandCode();
        }
    }
    //将生成验证码，定义成一个独立的函数
    function creatRandCode()
    {
    /*1.随机生成四位的随机数*/
    var code="";
    for (var i=0;i<4;i++)
        code+=Math.floor(Math.random()*10)
    /*2.将Code的值填入到对应的输入框上*/
    //2.1找到对应的输入框对象
    var obj =document.getElementById("randCode");
    //2.2设置输入框的内容
    obj.value=code;
    }

    //页面加载的时候，首次调用生成验证码的函数
    creatRandCode();

</script>